<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>键盘事件</title>
</head>
<body>
  <h2>按下 q / w / e / r 查看效果</h2>
  <script>
    // 在窗口按下任何一个按键, 提示你按下了键盘
    // on when 当...时候   key 按键   down 向下
    window.onkeydown = function(e){
      // alert('你按下了一个按键');
      //识别用户按下的按键信息
      // console.log(e.keyCode);//keyCode 按键的编码
      console.log(e.code);
    }

    //当键盘抬起的时候
    window.onkeyup = function(){
      // alert('你抬起了一个按键');
    }

    /**
     * 需求: 根据用户的按键, 显示不同的提示
     * q: 输出『天音波』
     * w: 输出『金钟罩』
     * e: 输出『天雷破』
     * r: 输出『神龙摆尾』
     */
    window.onkeydown = function(e){
      //判断  if...else    switch
      let k = e.code;
      //判断
      switch(k){
        case 'KeyQ':
          alert('天音波');
          break;
        case 'KeyW':
          alert('金钟罩');
          break;
        case 'KeyE':
          alert('天雷破');
          break;
        case 'KeyR':
          alert('神龙摆尾');
          break;
        case 'KeyD':
          alert('惩戒');
          break;
        case 'KeyF':
          alert('闪现');
          break;
      }
    }


  </script>
</body>
</html>